<div class="row">
	<div class="col-xs-12">
		<div class="box" id="keyServicesApp">
			<div class="box-header">
				<h3 class="box-title">特色服务</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="服务名" v-model="name">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search" @click="loadKeyServicesList()">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-add" @click="loadInsertPage()">添加</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>类型</th>
							<th>服务名称</th>
							<th>图片</th>
							<th>发布时间</th>
							<th>简介</th>
							<th>服务内容</th>
							<th>修改人</th>
							<th>修改时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="keyService in keyServicesList">
							<td>{{keyService.type==0?"专项服务":"特约服务"}}</td>
							<td>{{keyService.name}}</td>
							<td><img :src="keyService.img" alt="" style="width: 60%"></td>
							<td>{{keyService.createdtime}}</td>
							<td><textarea v-text="keyService.summary.substr(0,18)+'...'" cols="10px" rows="4px" readonly></textarea></td>
							<td><textarea v-text="keyService.content.substr(0,18)+'...'" cols="10px" rows="4px" readonly></textarea></td>
							<td>{{keyService.modifyusername}}</td>
							<td>{{keyService.modifytime}}</td>
							<td>
								<button type="button" @click="loadEditPage(keyService.name)" >修改</button>
								<button type="button" @click="loadDeletePage(keyService.id)" >删除</button>
							</td>
						</tr>
					</tbody>

				</table>
			</div>
			<div id="pageId" class="box-footer clearfix">
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<li :class="{disabled:pageInfo.isFirstPage}">
							<a href="#" aria-label="Previous"  @click.prevent="prePage()">
								<span aria-hidden="true" >上一页</span>
							</a>
						</li>
						<li v-for="n in pageInfo.navigatepageNums"
							:class="{active:n==pageInfo.pageNum}">
							<a href="#" @click.prevent="loadKeyServicesList(n)" >{{n}}</a>
						</li>
						<li :class="{disabled: pageInfo.isLastPage}">
							<a href="#" aria-label="Next" @click.prevent="nextPage()">
								<span aria-hidden="true">下一页</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
		var keyServicesApp= new Vue({
			el:'#keyServicesApp',
			data:{
				name:'',
				keyServicesList:[],
				pageInfo:{}
			},
			methods:{
				loadKeyServicesList:function (page) {
					if(!page){
						page=1;
					}
					let name=this.name;
					//发起请求
					axios({
						method:'get',
						url:'/f-keyservices/findKeyServicesList',
						params:{
							"name":name,
							"pageNum":page
						}
					}).then(res=> {
						let result=res.data;
						if(result.state==2000){
							//将数据加载到列表中
							this.keyServicesList=result.data.list;
							this.pageInfo=result.data;
						}else{
							alert(result.message);
						}
					}).catch(e=>console.error(e.message))
				},
				nextPage:function () {
					if(this.pageInfo.hasNextPage){
						this.loadKeyServicesList(this.pageInfo.nextPage);
					}
				},
				prePage:function () {
					if(this.pageInfo.hasPreviousPage){
						this.loadKeyServicesList(this.pageInfo.prePage);
					}
				},
				loadInsertPage:function () {
					$("#mainContentId").load("/sys/keyServicesInsert");
				},
				loadEditPage:function (keyServicesName) {
					$("#mainContentId").data("keyServicesName",keyServicesName);
					$('#mainContentId').load("/sys/keyServicesEdit");
				},
				loadDeletePage:function (id) {
					//删除
					if (id==null){
						alert("请重新选择");
						return;
					}
					if(!confirm("确定删除吗")){
						return;
					}
					axios({
						url:"/f-keyservices/delete",
						method:"get",
						params:{
							id:id
						}
					}).then(function (response) {
						let result = response.data;
						if(result.state==2000){
							alert("删除成功");
							keyServicesApp.loadKeyServicesList();
						}else{
							alert(result.message);
						}
					}).catch(e=>console.error(e.message))
				}
			},
			mounted(){
				//页面Html加载完成后,执行
				this.loadKeyServicesList();

			}
		})
</script>




